<template>
  <div class="home">
    <div>
      <span
        v-for="(item, index) in nav"
        :key="index"
        @click="change(index)"
        :class="{ bg: index <= flag }"
        >{{ item }}</span
      >
    </div>
    <ul>
      <li v-show="flag == 0">
        商品名称：<input type="text" v-model="name" />
        <br />
        <button @click="step0">下一步</button>
      </li>

      <li v-show="flag == 1">
        价格：<input type="text" v-model="price" />
        <br />
        <button @click="flag--">上一步</button>
        <button @click="step1">下一步</button>
      </li>
      <li v-show="flag == 2">
        图片路径：<input type="text" v-model="img" />
        <br />
        <button @click="flag--">上一步</button>
        <button @click="step2">下一步</button>
      </li>
      <li v-show="flag == 3">
        库存量：<input type="text" v-model="num" />
        <br />
        <button @click="flag--">上一步</button>
        <button @click="submit">提交</button>
      </li>
    </ul>
    <div v-show="show">
      名字：{{ name }} <br />
      价格：{{ price }}
      <br />
      图片路径：{{ img }} <br />
      库存：{{ num }} <br />

      <button @click="reset">清空重置</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nav: ["第一步", "第二步", "第三步", "第四步"],
      name: "",
      price: "",
      img: "",
      num: "",
      flag: 0,
      show: false,
    };
  },
  methods: {
    change(i) {
      // this.flag = i;
      // if (i == 0) {
      //   this.flag = 0;
      // } else if (i == 1) {
      //   this.step0();
      // } else if (i == 2) {
      //   this.step1();
      // } else if (i == 3) {
      //   this.step2();
      // }
      switch (i) {
        case 0:
          this.flag = 0;
          break;
        case 1:
          this.step0();
          break;
        case 2:
          this.step1();
          break;
        case 3:
          this.step2();
          break;
        default:
          break;
      }
    },
    step0() {
      if (this.name == "") {
        alert("不能为空");
      } else {
        this.flag = 1;
      }
    },
    step1() {
      if (this.price == "") {
        alert("不能为空");
      } else {
        this.flag = 2;
      }
    },
    step2() {
      if (this.img == "") {
        alert("不能为空");
      } else {
        this.flag = 3;
      }
    },
    submit() {
      if (this.num == "") {
        alert("不能为空");
      } else {
        // this.flag = 3;
        this.show = true;
      }
    },
    reset() {
      this.show = false;
      this.flag = 0;
      this.name = "";
      this.price = "";
      this.img = "";
      this.num = "";
    },
  },
};
</script>
<style lang="scss">
.bg {
  color: rgb(12, 173, 120);
}
</style>
